<script setup lang="ts">
import CopyOutlined from "@ant-design/icons-vue/CopyOutlined"
import DeleteOutlined from "@ant-design/icons-vue/DeleteOutlined";
import DesktopOutlined from "@ant-design/icons-vue/DesktopOutlined"
import DownOutlined from "@ant-design/icons-vue/DownOutlined"
import FormOutlined from "@ant-design/icons-vue/FormOutlined"
import MinusCircleOutlined from "@ant-design/icons-vue/MinusCircleOutlined"
import InteractionOutlined from "@ant-design/icons-vue/InteractionOutlined"
import PauseCircleOutlined from "@ant-design/icons-vue/PauseCircleOutlined";
import PlayCircleOutlined from "@ant-design/icons-vue/PlayCircleOutlined";
import ProfileOutlined from "@ant-design/icons-vue/ProfileOutlined"
import ProjectOutlined from "@ant-design/icons-vue/ProjectOutlined"
import {message} from "ant-design-vue";
import dayjs from "dayjs";
import {WxtBiddingMethods, WxtBizCode, WxtPageFields, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";
import AccurateCrowdResourceAllocation
  from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/AccurateCrowdResourceAllocation.vue";
import DeletePlan from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/DeletePlan.vue";
import OperationRecords from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/OperationRecords.vue";
import PromotionStatus from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/PromotionStatus.vue";
import ReportComparison from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/ReportComparison.vue";
import ResourceAllocation from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/ResourceAllocation.vue";
import {digitFormat} from "~/utils/util";

const props = defineProps({
  data: {
    type: Array,
    default: () => ([])
  },
  rows: {
    type: Array,
    default: () => ([])
  },
  dateRange: {
    type: Array,
    default: () => ([])
  },
  loading: {
    type: Boolean,
    default: false
  },
  staticAdPkgLists: {
    type: Array,
    default: () => []
  },
});
const emit = defineEmits(['update:rows', 'refresh']);
const columns = ref<any[]>([
  {
    title: '状态',
    dataIndex: 'displayStatus',
    width: 70,
    dataType: 'custom',
    fixed: 'left',
    slot: 'displayStatus',
    sorter: (a: any, b: any) => {
      // 字符串排序
      return a.displayStatus.localeCompare(b.displayStatus);
    },
  },
  {
    title: '计划名称',
    dataIndex: 'campaignName',
    key: 'campaignName',
    width: 250,
    dataType: 'custom',
    slot: 'campaignName',
    fixed: 'left',
  },
  {
    title: '单元个数',
    dataIndex: 'adgroupCount',
    width: 100,
    fixed: 'left',
  },
  {
    title: '计划组',
    dataIndex: 'campaignGroupName',
    width: 200,
    dataType: 'custom',
    slot: 'campaignGroupName',
  },
  {
    title: '计划标签',
    dataIndex: 'showTagListName',
    width: 200,
    dataType: 'custom',
    slot: 'showTagListName',
  },
  {
    title: '预算',
    dataIndex: 'dayBudget',
    width: 100,
    dataType: 'customRender',
    render: (text: string) => {
      return `${text}元/日`;
    },
    sorter: (a: any, b: any) => parseFloat(a.dayBudget) - parseFloat(b.dayBudget),
  },
  {
    title: '分时折扣',
    dataIndex: 'launchPeriodDiscount',
    width: 100,
    sorter: (a: any, b: any) => parseFloat(a.launchPeriodDiscount) - parseFloat(b.launchPeriodDiscount),
  },
  {
    title: '出价方式',
    dataIndex: 'bidType',
    width: 100,
    dataType: 'customRender',
    render: (text: string) => {
      if (text === WxtBiddingMethods.手动出价) {
        return '手动出价'
      } else if (text === WxtBiddingMethods.最大化拿量) {
        return '最大化拿量'
      } else if (text === WxtBiddingMethods.控成本投放) {
        return '控成本投放'
      } else if (text === WxtBiddingMethods.控投产比投放) {
        return '控投产比投放'
      }
    }
  },
  {
    title: '投放日期',
    dataIndex: 'launchTime',
    width: 150,
    dataType: 'custom',
    render: (val: any) => {
      return dayjs(val.startTime).format('YYYY-MM-DD') + '~' + dayjs(val.endTime).format('YYYY-MM-DD');
    },
    slot: 'launchTime',
    sorter: (a: any, b: any) => {
      return dayjs(a.launchTime.startTime).valueOf() - dayjs(b.launchTime.startTime).valueOf();
    },
  },
  {
    title: '展现量',
    dataIndex: 'reportInfoList.adPv',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].adPv || 0;
        // 每隔三位逗号分隔
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].adPv || 0) - (b.reportInfoList[0].adPv || 0);
    },
  },
  {
    title: '点击量',
    dataIndex: 'reportInfoList.click',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].click || 0;
        // 每隔三位逗号分隔
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].click || 0) - (b.reportInfoList[0].click || 0);
    },
  },
  {
    title: '花费',
    dataIndex: 'reportInfoList.charge',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].charge || 0;
        // 每隔三位逗号分隔
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].charge || 0) - (b.reportInfoList[0].charge || 0);
    },
  },
  {
    title: '点击率',
    dataIndex: 'reportInfoList.ctr',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].ctr || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].ctr || 0) - (b.reportInfoList[0].ctr || 0);
    },
  },
  {
    title: '平均点击花费',
    dataIndex: 'reportInfoList.ecpc',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].ecpc || 0;
        return digitFormat((value).toFixed(2));
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].ecpc || 0) - (b.reportInfoList[0].ecpc || 0);
    },
  },
  {
    title: '千次展现花费',
    dataIndex: 'reportInfoList.ecpm',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].ecpm || 0;
        return digitFormat((value).toFixed(2));
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].ecpm || 0) - (b.reportInfoList[0].ecpm || 0);
    },
  },
  {
    title: '拍下订单笔数',
    dataIndex: 'reportInfoList.gmvInshopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].gmvInshopNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].gmvInshopNum || 0) - (b.reportInfoList[0].gmvInshopNum || 0);
    },
  },
  {
    title: '拍下订单金额',
    dataIndex: 'reportInfoList.gmvInshopAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].gmvInshopAmt || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].gmvInshopAmt || 0) - (b.reportInfoList[0].gmvInshopAmt || 0);
    },
  },
  {
    title: '预售成交笔数',
    dataIndex: 'reportInfoList.prepayInshopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].prepayInshopNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].prepayInshopNum || 0) - (b.reportInfoList[0].prepayInshopNum || 0);
    },
  },
  {
    title: '预售成交金额',
    dataIndex: 'reportInfoList.prepayInshopAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].prepayInshopAmt || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].prepayInshopAmt || 0) - (b.reportInfoList[0].prepayInshopAmt || 0);
    },
  },
  {
    title: '预售成交金额',
    dataIndex: 'reportInfoList.prepayIndirAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].prepayDirAmt || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].prepayDirAmt || 0) - (b.reportInfoList[0].prepayDirAmt || 0);
    },
  },
  {
    title: '预售间接成交笔数',
    dataIndex: 'reportInfoList.prepayIndirNum',
    width: 140,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].prepayIndirNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].prepayIndirNum || 0) - (b.reportInfoList[0].prepayIndirNum || 0);
    },
  },
  {
    title: '预售间接成交金额',
    dataIndex: 'reportInfoList.prepayDirAmt',
    width: 140,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].prepayIndirAmt || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].prepayIndirAmt || 0) - (b.reportInfoList[0].prepayIndirAmt || 0);
    },
  },
  {
    title: '总成交笔数',
    dataIndex: 'reportInfoList.alipayInshopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayInshopNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayInshopNum || 0) - (b.reportInfoList[0].alipayInshopNum || 0);
    },
  },
  {
    title: '总成交金额',
    dataIndex: 'reportInfoList.alipayInshopAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayInshopAmt || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayInshopAmt || 0) - (b.reportInfoList[0].alipayInshopAmt || 0);
    },
  },
  {
    title: '直接成交笔数',
    dataIndex: 'reportInfoList.alipayDirNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayDirNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayDirNum || 0) - (b.reportInfoList[0].alipayDirNum || 0);
    },
  },
  {
    title: '直接成交金额',
    dataIndex: 'reportInfoList.alipayDirAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayDirAmt || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayDirAmt || 0) - (b.reportInfoList[0].alipayDirAmt || 0);
    },
  },
  {
    title: '间接成交笔数',
    dataIndex: 'reportInfoList.alipayIndirNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayIndirNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayIndirNum || 0) - (b.reportInfoList[0].alipayIndirNum || 0);
    },
  },
  {
    title: '间接成交金额',
    dataIndex: 'reportInfoList.alipayIndirAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayIndirAmt || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayIndirAmt || 0) - (b.reportInfoList[0].alipayIndirAmt || 0);
    },
  },
  {
    title: '点击转化率',
    dataIndex: 'reportInfoList.cvr',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].cvr || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cvr || 0) - (b.reportInfoList[0].cvr || 0);
    },
  },
  {
    title: '投入产出比',
    dataIndex: 'reportInfoList.roi',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].roi || 0;
        return (value).toFixed(2);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].roi || 0) - (b.reportInfoList[0].roi || 0);
    },
  },
  {
    title: '直接成交RIO',
    dataIndex: 'reportInfoList.dirRoi',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].dirRoi || 0;
        return (value).toFixed(2);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].dirRoi || 0) - (b.reportInfoList[0].dirRoi || 0);
    },
  },
  {
    title: '总成交成本',
    dataIndex: 'reportInfoList.alipayInshopCost',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayInshopCost || 0;
        return (value).toFixed(2);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayInshopCost || 0) - (b.reportInfoList[0].alipayInshopCost || 0);
    },
  },
  {
    title: '总购物车数',
    dataIndex: 'reportInfoList.cartInshopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].cartInshopNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cartInshopNum || 0) - (b.reportInfoList[0].cartInshopNum || 0);
    },
  },
  {
    title: '直接购物车数',
    dataIndex: 'reportInfoList.cartDirNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].cartDirNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cartDirNum || 0) - (b.reportInfoList[0].cartDirNum || 0);
    },
  },
  {
    title: '间接购物车数',
    dataIndex: 'reportInfoList.cartIndirNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].cartIndirNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cartIndirNum || 0) - (b.reportInfoList[0].cartIndirNum || 0);
    },
  },
  {
    title: '加购率',
    dataIndex: 'reportInfoList.cartRate',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].cartRate || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cartRate || 0) - (b.reportInfoList[0].cartRate || 0);
    },
  },
  {
    title: '收藏宝贝数',
    dataIndex: 'reportInfoList.itemColInshopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColInshopNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColInshopNum || 0) - (b.reportInfoList[0].itemColInshopNum || 0);
    },
  },
  {
    title: '收藏店铺数',
    dataIndex: 'reportInfoList.shopColDirNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].shopColDirNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].shopColDirNum || 0) - (b.reportInfoList[0].shopColDirNum || 0);
    },
  },
  {
    title: '店铺收藏成本',
    dataIndex: 'reportInfoList.shopColInshopCost',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].shopColInshopCost || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].shopColInshopCost || 0) - (b.reportInfoList[0].shopColInshopCost || 0);
    },
  },
  {
    title: '总收藏加购数',
    dataIndex: 'reportInfoList.colCartNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].colCartNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].colCartNum || 0) - (b.reportInfoList[0].colCartNum || 0);
    },
  },
  {
    title: '总收藏加购成本',
    dataIndex: 'reportInfoList.colCartCost',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].colCartCost || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].colCartCost || 0) - (b.reportInfoList[0].colCartCost || 0);
    },
  },
  {
    title: '宝贝收藏加购数',
    dataIndex: 'reportInfoList.itemColCart',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColCart || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColCart || 0) - (b.reportInfoList[0].itemColCart || 0);
    },
  },
  {
    title: '宝贝收藏加购成本',
    dataIndex: 'reportInfoList.itemColCartCost',
    width: 140,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColCartCost || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColCartCost || 0) - (b.reportInfoList[0].itemColCartCost || 0);
    },
  },
  {
    title: '总收藏数',
    dataIndex: 'reportInfoList.colNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].colNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].colNum || 0) - (b.reportInfoList[0].colNum || 0);
    },
  },
  {
    title: '宝贝收藏成本',
    dataIndex: 'reportInfoList.itemColInshopCost',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColInshopCost || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColInshopCost || 0) - (b.reportInfoList[0].itemColInshopCost || 0);
    },
  },
  {
    title: '宝贝收藏率',
    dataIndex: 'reportInfoList.itemColInshopRate',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColInshopRate || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColInshopRate || 0) - (b.reportInfoList[0].itemColInshopRate || 0);
    },
  },
  {
    title: '加购成本',
    dataIndex: 'reportInfoList.cartCost',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].cartCost || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cartCost || 0) - (b.reportInfoList[0].cartCost || 0);
    },
  },
  {
    title: '直接收藏宝贝数',
    dataIndex: 'reportInfoList.itemColDirNum',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColDirNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColDirNum || 0) - (b.reportInfoList[0].itemColDirNum || 0);
    },
  },
  {
    title: '间接收藏宝贝数',
    dataIndex: 'reportInfoList.itemColIndirNum',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColIndirNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColIndirNum || 0) - (b.reportInfoList[0].itemColIndirNum || 0);
    },
  },
  {
    title: '优惠劵领取量',
    dataIndex: 'reportInfoList.couponShopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].couponShopNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].couponShopNum || 0) - (b.reportInfoList[0].couponShopNum || 0);
    },
  },
  {
    title: '购物金充值笔数',
    dataIndex: 'reportInfoList.shoppingNum',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].shoppingNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].shoppingNum || 0) - (b.reportInfoList[0].shoppingNum || 0);
    },
  },
  {
    title: '购物金充值金额',
    dataIndex: 'reportInfoList.shoppingAmt',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].shoppingAmt || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].shoppingAmt || 0) - (b.reportInfoList[0].shoppingAmt || 0);
    },
  },
  {
    title: '旺旺咨询量',
    dataIndex: 'reportInfoList.wwNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].wwNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].wwNum || 0) - (b.reportInfoList[0].wwNum || 0);
    },
  },
  {
    title: '间接成交ROI',
    dataIndex: 'reportInfoList.indirRoi',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].indirRoi || 0;
        return value.toFixed(2);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].indirRoi || 0) - (b.reportInfoList[0].indirRoi || 0);
    },
  },
  {
    title: '直接转化率',
    dataIndex: 'reportInfoList.dirCvr',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].dirCvr || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].dirCvr || 0) - (b.reportInfoList[0].dirCvr || 0);
    },
  },
  {
    title: '间接转化率',
    dataIndex: 'reportInfoList.indirCvr',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].indirCvr || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].indirCvr || 0) - (b.reportInfoList[0].indirCvr || 0);
    },
  },
  {
    title: '直接收藏加购率',
    dataIndex: 'reportInfoList.dirFavAddRate',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].dirFavAddRate || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].dirFavAddRate || 0) - (b.reportInfoList[0].dirFavAddRate || 0);
    },
  },
  {
    title: '间接收藏加购率',
    dataIndex: 'reportInfoList.indirFavRate',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].indirFavRate || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].indirFavRate || 0) - (b.reportInfoList[0].indirFavRate || 0);
    },
  },
  //TODO
]);
const tableBox = ref<any>(null);
const selectedRows = ref<any[]>([]);
watch(() => selectedRows.value, (data) => {
  emit('update:rows', data)
})
const copy = (text: string) => {
  navigator.clipboard.writeText(text).then(() => {
    message.success('复制成功')
  }).catch(() => {
    message.error('复制失败')
  });
}
const scroll = ref({
  x: 1000,
  y: 650,
});
watch(() => tableBox.value, (tableBox) => {
  if (tableBox) {
    scroll.value = {
      x: tableBox.offsetWidth,
      y: tableBox.offsetHeight - 104,
    }
  }
})
watch(() => props.rows, (data) => {
  selectedRows.value = data;
});
// 监听窗口变化
window.addEventListener('resize', () => {
  if (tableBox.value) {
    scroll.value = {
      x: tableBox.value ? tableBox.value.offsetWidth : 1000,
      y: tableBox.value ? (tableBox.value.offsetHeight - 104) : 1000,
    }
  }
})
// const changeStatus = (item: any, key: any, keyPath: any) => {
//   console.log(item, key, keyPath)
//   WxtUtils.campaignUpdatePart([{
//     campaignId: item.item.id,
//     displayStatus: item.key
//   }], WxtBizCode.精准人群推广).then(res => {
//     message.success('修改成功!')
//     emit('refresh')
//   }).catch(err => {
//     message.error('修改失败,请稍后重试！')
//   })
// }
const modifyCampaignName = (row: any) => {
  let value = prompt('请输入计划名称', row.campaignName)
  if (value) {
    WxtUtils.campaignUpdatePart([{
      campaignId: row.campaignId,
      campaignName: value
    }], WxtBizCode.精准人群推广).then(res => {
      message.success('修改成功!')
      emit('refresh')
    }).catch(err => {
      message.error('修改失败,请稍后重试！')
    })
  }
}
const toggleTopStatus = (row: any) => {
  WxtUtils.campaignUpdatePart([{
    campaignId: row.campaignId,
    topStatus: !row.topStatus
  }], WxtBizCode.精准人群推广).then(res => {
    message.success('修改成功!')
    emit('refresh')
  }).catch(err => {
    message.error('修改失败,请稍后重试！')
  })
}
</script>

<template>
  <div style="width: 100%;height: 100%;" ref="tableBox">
    <base-table :data-source="data" table-name="超级优化-关键词推广-计划列表" :columns="columns"
                v-model:selected-rows="selectedRows" selection rowKey="campaignId"
                :loading="loading"
                :scroll="scroll"
                pagination
    >
      <template #displayStatus="row">

        <MinusCircleOutlined v-if="row.displayStatus=='terminate'" :style="{
              color: '#444'
            }"
        />

        <PromotionStatus :rows="[row]" v-else @refresh="emit('refresh')" :biz-code="WxtBizCode.精准人群推广">
          <a-space>
            <PlayCircleOutlined v-if="row.displayStatus=='start'" :style="{
      color: '#1677ff'
    }"
            />
            <PauseCircleOutlined v-else-if="row.displayStatus=='pause'" :style="{
      color: '#ff4d4f'
    }"
            />
            <DownOutlined style="font-size: 12px;color: #444;"/>
          </a-space>
        </PromotionStatus>


      </template>
      <!--    topStatus-->
      <template #campaignName="row">
        <a-row type="flex" class="campaignName">
          <a-col flex="1" class="title">
            <svg v-if="row.topStatus" style="color: #1677ff;" width="14" height="14" xmlns="http://www.w3.org/2000/svg"
                 class="top"
            >
              <path data-v-9750511c=""
                    d="M7 13.417C3.47 13.417.583 10.529.583 7 .583 3.47 3.471.583 7 .583c3.53 0 6.417 2.888 6.417 6.417 0 3.53-2.888 6.417-6.417 6.417zm0-11.63A5.203 5.203 0 001.786 7 5.203 5.203 0 007 12.214 5.203 5.203 0 0012.214 7 5.203 5.203 0 007 1.786zm1.765 7.021c-.16 0-.321-.08-.482-.24l-.722-.802v2.442c0 .321-.24.562-.641.562a.548.548 0 01-.562-.562V7.766l-.722.802c-.08.16-.24.24-.48.24a.548.548 0 01-.562-.561c0-.16.08-.321.16-.401L6.52 5.84c.08-.16.24-.241.481-.241.16 0 .32.08.481.24l1.765 2.006c.08.08.16.24.16.4 0 .322-.24.562-.641.562zM5.167 4.083h3.666a.5.5 0 01.5.5v.167a.5.5 0 01-.5.5H5.167a.5.5 0 01-.5-.5v-.167a.5.5 0 01.5-.5z"
                    fill="currentColor" fill-rule="nonzero"
              ></path>
            </svg>
            {{ row.campaignName }}
          </a-col>
          <a-col class="hover-show">
            <a-space>
              <a-tooltip placement="top" title="修改计划名">
                <FormOutlined style="font-size: 12px;color: #1677ff;" @click="modifyCampaignName(row)"/>
              </a-tooltip>
              <ReportComparison :rows="[row]" :showDate="false" :date-range="[dayjs(),dayjs()]"
                                :biz-code="WxtBizCode.精准人群推广"
                                :page-fields="WxtPageFields.精准人群推广"
              >
                <a-tooltip placement="top" title="日期小时数对比">
                  <InteractionOutlined style="font-size: 12px;color: #1677ff;"/>
                </a-tooltip>
              </ReportComparison>
              <ReportComparison :rows="[row]" :date-range="dateRange" :biz-code="WxtBizCode.精准人群推广"
                                :page-fields="WxtPageFields.精准人群推广"
              >
                <a-tooltip placement="top" title="计划报表">
                  <ProjectOutlined style="font-size: 12px;color: #1677ff;cursor: pointer"/>
                </a-tooltip>
              </ReportComparison>
              <!--              <a-tooltip placement="top" title="计划详情">-->
              <!--                <ProfileOutlined style="font-size: 12px;color: #1677ff;"/>-->
              <!--              </a-tooltip>-->
              <a-tooltip placement="top" title="置顶" v-if="!row.topStatus">
                <svg style="color: #1677ff;cursor: pointer;" width="14" height="14" xmlns="http://www.w3.org/2000/svg"
                     class="top" @click="toggleTopStatus(row)"
                >
                  <path data-v-9750511c=""
                        d="M7 13.417C3.47 13.417.583 10.529.583 7 .583 3.47 3.471.583 7 .583c3.53 0 6.417 2.888 6.417 6.417 0 3.53-2.888 6.417-6.417 6.417zm0-11.63A5.203 5.203 0 001.786 7 5.203 5.203 0 007 12.214 5.203 5.203 0 0012.214 7 5.203 5.203 0 007 1.786zm1.765 7.021c-.16 0-.321-.08-.482-.24l-.722-.802v2.442c0 .321-.24.562-.641.562a.548.548 0 01-.562-.562V7.766l-.722.802c-.08.16-.24.24-.48.24a.548.548 0 01-.562-.561c0-.16.08-.321.16-.401L6.52 5.84c.08-.16.24-.241.481-.241.16 0 .32.08.481.24l1.765 2.006c.08.08.16.24.16.4 0 .322-.24.562-.641.562zM5.167 4.083h3.666a.5.5 0 01.5.5v.167a.5.5 0 01-.5.5H5.167a.5.5 0 01-.5-.5v-.167a.5.5 0 01.5-.5z"
                        fill="currentColor" fill-rule="nonzero"
                  ></path>
                </svg>
              </a-tooltip>
              <a-tooltip placement="top" title="取消置顶" v-else>
                <svg style="color: #666;cursor: pointer;" width="14" height="14" xmlns="http://www.w3.org/2000/svg"
                     class="top" @click="toggleTopStatus(row)"
                >
                  <path data-v-9750511c=""
                        d="M7 13.417C3.47 13.417.583 10.529.583 7 .583 3.47 3.471.583 7 .583c3.53 0 6.417 2.888 6.417 6.417 0 3.53-2.888 6.417-6.417 6.417zm0-11.63A5.203 5.203 0 001.786 7 5.203 5.203 0 007 12.214 5.203 5.203 0 0012.214 7 5.203 5.203 0 007 1.786zm1.765 7.021c-.16 0-.321-.08-.482-.24l-.722-.802v2.442c0 .321-.24.562-.641.562a.548.548 0 01-.562-.562V7.766l-.722.802c-.08.16-.24.24-.48.24a.548.548 0 01-.562-.561c0-.16.08-.321.16-.401L6.52 5.84c.08-.16.24-.241.481-.241.16 0 .32.08.481.24l1.765 2.006c.08.08.16.24.16.4 0 .322-.24.562-.641.562zM5.167 4.083h3.666a.5.5 0 01.5.5v.167a.5.5 0 01-.5.5H5.167a.5.5 0 01-.5-.5v-.167a.5.5 0 01.5-.5z"
                        fill="currentColor" fill-rule="nonzero"
                        data-spm-anchor-id="a2e1zy.28220772.0.i29.751358ddfkezlW"
                  ></path>
                </svg>
              </a-tooltip>
              <AccurateCrowdResourceAllocation :rows="[row]" :biz-code="WxtBizCode.精准人群推广"
                                               :static-ad-pkg-lists="staticAdPkgLists"
                                               @refresh="()=>emit('refresh')"
              >

                <a-tooltip placement="top" title="设置投放资源位">
                  <DesktopOutlined style="font-size: 12px;color: #1677ff;"/>
                </a-tooltip>
              </AccurateCrowdResourceAllocation>
              <OperationRecords :rows="[row]" :biz-code="WxtBizCode.精准人群推广">
                <a-tooltip placement="top" title="操作记录">
                  <svg style="color: #666;cursor: pointer" width="14" height="14" xmlns="http://www.w3.org/2000/svg"
                       class="top"
                  >
                    <path data-v-9750511c=""
                          d="M9.333.525a4.142 4.142 0 014.142 4.142v4.666a4.142 4.142 0 01-4.142 4.142H4.667A4.142 4.142 0 01.525 9.333V4.667A4.142 4.142 0 014.667.525zm0 1.283H4.667a2.858 2.858 0 00-2.859 2.859v4.666a2.858 2.858 0 002.859 2.859h4.666a2.858 2.858 0 002.859-2.859V4.667a2.858 2.858 0 00-2.859-2.859zm.084 6.942a.5.5 0 01.5.5v.283a.5.5 0 01-.5.5H4.583a.5.5 0 01-.5-.5V9.25a.5.5 0 01.5-.5h4.834zm0-2.333a.5.5 0 01.5.5V7.2a.5.5 0 01-.5.5H4.583a.5.5 0 01-.5-.5v-.283a.5.5 0 01.5-.5h4.834zm0-2.334a.5.5 0 01.5.5v.284a.5.5 0 01-.5.5H4.583a.5.5 0 01-.5-.5v-.284a.5.5 0 01.5-.5h4.834z"
                          fill="currentColor" fill-rule="nonzero"
                          data-spm-anchor-id="a2e1zy.28220772.0.i30.751358ddfkezlW"
                    ></path>
                  </svg>
                </a-tooltip>
              </OperationRecords>
              <DeletePlan :rows="[row]" :biz-code="WxtBizCode.精准人群推广">
                <a-tooltip placement="top" title="删除计划">
                  <DeleteOutlined style="font-size: 12px;color: #f5222d;"/>
                </a-tooltip>
              </DeletePlan>
            </a-space>
          </a-col>
        </a-row>
        <a-space>
          <span style="color: #666;">ID: {{ row.campaignId }}</span>
          <CopyOutlined style="color: #1677ff;cursor: pointer;font-size: 12px;" @click="copy(row.campaignId)"/>
        </a-space>
      </template>
      <template #campaignGroupName="row">
        <div v-if="row.campaignGroupName">

          <a-space>
            {{ row.campaignGroupName }}
          </a-space>
          <br>
          <a-space>
            <span style="color: #666;">ID: {{ row.campaignGroupId }}</span>
            <CopyOutlined style="color: #1677ff;cursor: pointer;font-size: 12px;" @click="copy(row.campaignGroupId)"/>
          </a-space>
        </div>
        <div v-else>
          - -
        </div>
      </template>
      <template #showTagListName="row">
        <a-space>
          <a-tag>{{ row.showTagList[0].name }}</a-tag>
          <a-popover>
            <template #content>
              <a-space>
                <a-tag v-for="(tag,index) in row.showTagList" :key="index" v-show="index>0">{{ tag.name }}</a-tag>
              </a-space>
            </template>
            <span v-if="row.showTagList.length>1" style="color: #444;font-size: 12px;"
            >+{{ row.showTagList.length - 1 }}</span>
          </a-popover>
        </a-space>
      </template>
      <template #launchTime="row">
        <div>
          起：{{ dayjs(row.launchTime.startTime).format('YYYY-MM-DD') }}
        </div>
        <div>
          止：{{ dayjs(row.launchTime.endTime).format('YYYY-MM-DD') }}
        </div>
      </template>
    </base-table>
  </div>

</template>

<style lang="less" scoped>
svg {
  vertical-align: middle;
  font-size: 12px;
}

.campaignName {
  .title {
    // 一行超出隐藏
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hover-show {
    display: none;
  }

  &:hover {
    .hover-show {
      display: block;
    }
  }
}
</style>
